<!--  -->
<template>
  <div>


    <van-nav-bar title="城市选择" left-arrow fixed placeholder z-index="999" @click-left="$router.back()"    />

    <div class="city-content">
      <van-cell-group>
        <van-cell title="定位城市" />
        <div class="city-btns">
          <van-button
            plain
            type="default"
            @click="
              $router.push({
                path: '/shopList',
                query: { cityName },
              })
            "
            >{{ cityName }}</van-button
          >
        </div>
      </van-cell-group>
      <van-cell-group>
        <van-cell title="所有城市" />

        <van-index-bar :index-list="indexList">
          <div v-for="(item, key) in cityList" :key="key">
            <div class="city-btns">
              <van-index-anchor :index="key" />
              <van-button
                plain
                type="default"
                class="city-btn"
                v-for="item2 in item"
                :key="item2._id"
                @click="
                  $router.push({
                    path: '/shopList',
                    query: { cityName: item2.city },
                  })
                "
                >{{ item2.city }}</van-button
              >
            </div>
          </div>
        </van-index-bar>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { IndexBar, IndexAnchor } from "vant";
export default {
  data() {
    return {
      cityName: "",
      cityList: {},
      indexList: [], // 自定义索引列表
    };
  },
  components: {
    [IndexBar.name]: IndexBar,
    [IndexAnchor.name]: IndexAnchor,
  },

  mounted() {
    this.getCityList();
  },
    activated(){
     this.LocalCity();
  },
  methods: {
    //  定位
    LocalCity() {
      let myCity = new BMapGL.LocalCity();
      myCity.get((res) => {
        localStorage.setItem("cityName", res.name);
        this.cityName = res.name;
      });
    },
    //  获取城市列表
    getCityList() {
      this.$http.get("/apis/city/pub/getList?group=true").then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.cityList = res.rows;
          // Object.keys   把一个对象里的 所有的key  组成一个数组
          // {
          //     a:1,
          //     b:2
          // }

          // ['a','b']
          this.indexList = Object.keys(res.rows);
        }
      });
    },
  },
};
</script>
<style lang='scss' scoped>

.van-cell-group,
.van-cell {
  background: #f3f3f3;
}
.city-content {
  position: relative;
}
.city-btns {
  background: #fff;
  padding: 10px;
  .city-btn {
    margin: 5px 8px;
  }
}
</style>